<template>
  <view class="body">
    <!-- <image :src="ossImg('others/Oreo_loading.png')"></image> -->
    <view
      class="loading_bg"
      :style="{
        backgroundImage: `url(${oss2('index/2023panda/loading1.png')})`,
      }"
    >
      <!-- <image :src="oss2('others/2023NewIndex/loadingBg.jpg')"></image> -->

      <view
        class="loading_logo"
        :style="{
          backgroundImage: `url(${oss2('index/2023panda/logo.png')})`,
        }"
      ></view>
      <view
        class="loading_title"
        :style="{
          backgroundImage: `url(${oss2('index/2023panda/font_pic.png')})`,
        }"
      >
      </view>

      <view class="loading_Dots">
        <view class="dot_list">
          <view
            class="loading_dot"
            v-for="item in 3"
            :style="{
              backgroundImage: `url(${oss2(
                'index/2023panda/font_point1.png'
              )})`,
            }"
          >
          </view> </view
      ></view>
    </view>
  </view>
</template>

<script setup>
import { ossImg, oss2 } from "@/utils/utils";
import { onShow } from "@dcloudio/uni-app";
import { ref } from "vue";
import { getLandingScene } from "@/services/utils";

onShow(async () => {
  getApp().accessLogAdd();

  switch (true) {
    case uni.getLaunchOptionsSync().path === "pages/webView/webview":
      setTimeout(() => {
        getApp()
          .getUserInfo()
          .then((user) => {
            console.log(
              6666666666666666,
              `/pages/webView/webview?token=${uni.getStorageSync(
                "TOKEN"
              )}&openid=${uni.getStorageSync(
                "OPENID"
              )}&unionid=${uni.getStorageSync("UNIONID")}&memberid=${
                user.memberScore.memberId
              }&webSrc=${uni.getLaunchOptionsSync().query.webSrc}&shareTitel=${
                uni.getLaunchOptionsSync().query.shareTitel
              }&shareImg=${uni.getLaunchOptionsSync().query.shareImg}`
            );
            uni.redirectTo({
              url: `/pages/webView/webview?token=${uni.getStorageSync(
                "TOKEN"
              )}&openid=${uni.getStorageSync(
                "OPENID"
              )}&unionid=${uni.getStorageSync("UNIONID")}&memberid=${
                user.memberScore.memberId
              }&webSrc=${uni.getLaunchOptionsSync().query.webSrc}&shareTitel=${
                uni.getLaunchOptionsSync().query.shareTitel
              }&shareImg=${uni.getLaunchOptionsSync().query.shareImg}`,
            });
          });
      }, 1500);
      break;

    default:
      if (uni.getLaunchOptionsSync().query.from) {
        setTimeout(() => {
          uni.redirectTo({
            url:
              "/" +
              uni.getLaunchOptionsSync().path +
              "?from=" +
              uni.getLaunchOptionsSync().query.from,
          });
        }, 1500);
      } else {
        setTimeout(() => {
          uni.redirectTo({
            url: "/" + uni.getLaunchOptionsSync().path,
          });
        }, 1500);
      }

      break;
  }
});
</script>

<style>
page {
  background-color: #071777 !important;
}
</style>
<style lang="less" scoped>
.body {
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;

  .loading_bg {
    width: 100%;
    height: 812px;
    background-repeat: no-repeat;
    background-position: top left;
    background-size: 375px 100%;
    position: relative;
    .loading_logo {
      position: absolute;
      width: 186px;
      height: 99px;
      top: 61.5px;
      left: 94.5px;
      background-repeat: no-repeat;
      background-position: top left;
      background-size: 186px 100%;
    }
    image {
      width: 100%;
      height: 100%;
    }
  }

  .loading_Progress {
    position: absolute;
    width: 320px;
    height: 28px;
    top: 633px;
    left: 27.5px;
    background-repeat: no-repeat;
    background-position: top left;
    background-size: 320px 100%;
    .loading_Progress_icon {
      position: absolute;
      width: 28px;
      height: 28px;
      top: -1px;
      background-repeat: no-repeat;
      background-position: top left;
      background-size: 28px 100%;
    }
  }

  .loading_title {
    position: absolute;
    width: 148px;
    height: 32px;
    top: 200px;
    left: 94px;
    background-repeat: no-repeat;
    background-position: top left;
    background-size: 148px 100%;
  }

  .loading_Dots {
    position: absolute;
    top: 200.5px;

    left: 246px;
    overflow-x: hidden;
    animation: ellipsis 2s infinite;
    .dot_list {
      width: 39px;
      display: flex;
      .loading_dot {
        width: 9px;
        height: 32px;
        margin-left: 4px;
        background-repeat: no-repeat;
        background-position: top left;
        background-size: 9px 100%;
      }
    }
  }
}

@keyframes ellipsis {
  from {
    width: 13px;
  }
  to {
    width: 39px;
  }
}
</style>
